<template>
  <div class="searchBox">
    <div class="top">
      <q-item-section>
        <q-select
          outlined
          dense
          emit-value
          v-model="searchInfo.search[isStatus]"
          map-options
          style="max-width: 218px"
          :options="topOptions"
        />
      </q-item-section>
    </div>
    <div class="bottomSearch">
      <div class="topLeft">
        <!-- <q-item-label class="text-body1">角色管理</q-item-label> -->
        <q-input
          clearable
          outlined
          dense
          placeholder="请输入关键字搜索"
          class="on-left"
          debounce="500"
          v-model="searchInfo.keywords"
          style="width: 220px"
        >
        </q-input>
        <el-config-provider :locale="zhCn">
          <el-date-picker
            v-model="searchInfo.dateMin.created_at"
            size="large"
            type="datetime"
            placeholder="最小时间"
            format="YYYY/MM/DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            :locale="zhCn"
          ></el-date-picker>
        </el-config-provider>
        &nbsp; - &nbsp;
        <el-config-provider :locale="zhCn">
          <el-date-picker
            v-model="searchInfo.dateMax.created_at"
            size="large"
            type="datetime"
            placeholder="最大时间"
            format="YYYY/MM/DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            :locale="zhCn"
          ></el-date-picker>
        </el-config-provider>
        <div class="searchBtn">
          <q-btn
            unelevated
            class="no-border-radius color-primary"
            color="primary"
            icon="search"
            label="查询"
            :loading="searchInfo.loading"
            style="margin-left: 10px"
            @click="listSearch"
          />
          <q-btn
            unelevated
            class="no-border-radius color-primary"
            color="primary"
            label="重置"
            style="margin-left: 10px"
            @click="listClearn"
          />
        </div>
      </div>
      <div class="topRight">
        <slot name="topRight_group"></slot>
        <q-btn
          rounded
          flat
          dense
          icon="add"
          @click="add"
          v-permission="`${props.auth ? props.auth : route.path + ':add'}`"
        >
          <q-tooltip>新建</q-tooltip>
        </q-btn>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
interface Props {
  search?: any;
  topOptions?: any;
  isStatus?: string;
  auth?: any; //权限字段，是否展示新建按钮
}
const props = withDefaults(defineProps<Props>(), {
  search: {
    keywords: '',
    search: {
      status: '',
    },
    dateMin: {
      created_at: '',
    },
    dateMax: {
      created_at: '',
    },
    loading: false,
  },
  isStatus: 'status',
  topOptions: [
    { value: '', label: '全部状态' },
    { value: 1, label: '启动' },
    { value: 0, label: '关闭' },
  ],
  auth: '',
});
const emit = defineEmits(['update:search', 'add', 'search']);
const route = useRoute();
const add = () => {
  console.log('新建');
  emit('add');
};
const listSearch = () => {
  console.log('查询');
  emit('search');
};
const listClearn = () => {
  console.log('重置');
  searchInfo.value.keywords = '';
  searchInfo.value.search[props.isStatus] = '';
  searchInfo.value.dateMin = {
    created_at: '',
  };
  searchInfo.value.dateMax = {
    created_at: '',
  };
  searchInfo.value.loading = false;
  emit('search');
};
const searchInfo: any = computed({
  set(value: any) {
    // emit('update:search', value);
  },
  get() {
    console.log('props.search', props.search);
    return props.search;
  },
});
</script>
<style scoped lang="scss">
.top {
  // padding-left: 10px;
  margin-bottom: 10px;
}
.topLeft {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  // padding-left: 58px;
}
.topRight {
  padding-top: 10px;
  display: flex;
  align-items: center;
}
::v-deep(.my-special-class) {
  height: 48px;
  background: #fafafa;
}
::v-deep(.my-special-class th) {
  font-size: 16px;
}
.bottomSearch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 780px) {
  ::v-deep(.q-table__separator) {
    display: none;
  }
  ::v-deep(.el-input--large) {
    margin-top: 8px;
  }
  .searchBtn {
    padding: 0;
    margin-top: 10px;
    margin-left: -10px;
  }
}
</style>
